<template>
  <div class="app-content flex-column">
    <el-form :model="queryParams" ref="queryRef">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item prop="stationId">
            <el-select v-model="queryParams.stationId" clearable placeholder="电站名称">
              <el-option v-for="(item,index) in userStore.stationList" :key="index" :label="item.stationName" :value="item.stationId" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="ruleType">
            <el-select v-model="queryParams.ruleType" clearable placeholder="告警类型">
              <el-option label="预警" value="1" />
              <el-option label="告警" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-col>
      </el-row>
    </el-form>

    <RichTable class="flex1" ref="richTableRef" height="0" :page="params" :options="options">
      <template #logicAddress="{ row }">
        <span>{{ row.controllerName }}</span>
        <span v-if="row.logicAddress">{{ '-'+row.logicAddress }}</span>
      </template>
      <!-- <template #ruleContent="{ row }">
        <div class="w100 text-ellipsis">{{ row.ruleContent }}</div>
      </template> -->
      <template #ruleType="{ row }">
        <el-tag :type="row.ruleType==1?'warning':'danger'"effect="light">{{ row.ruleType==1?'预警':'告警' }}</el-tag>
      </template>
    </RichTable>

    <Detail ref="detailRef" :data="detail"></Detail>
  </div>
</template>

<script setup>
import Detail from './Detail.vue'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const { proxy } = getCurrentInstance()
import { sendMessageApi } from '@/api/message';

// 列表
const richTableRef = ref();
const detailRef = ref();
const detail = ref({});
const params = ref({
  page: 1,
  size: 30,
  total:0
})
const options = ref({
  header:false,
  // 表格接口
  tableRequest: {
    url: '/bopeng-cms/rule/list',
    method: 'get',
    params: {
      stationId:'', // 电站名称
      ruleType:'', // 告警类型 1：预警 2：告警
    }
  },
  column: [
    { prop: 'stationName', label: '电站名称', },
    { prop: 'logicAddress', label: '设备名称', },
    { prop: 'ruleType', label: '告警类型', },
    { prop: 'ruleContent', label: '告警原因', attrs:{showOverflowTooltip:true} },
    { prop: 'createTime', label: '告警时间', },
    { type: 'operation', width:80 },
  ],
  rowEvent: [
    {
      label: "查看",
      callback: (row) => {
        // 消息改变状态,重新赋值数据
        let arr = userStore.messageList
        let messageInfo = userStore.messageList?.find(item => item.id==row.id)
        if(messageInfo) {
          messageInfo.isRead = true
        }
        userStore.setMessageList(arr)

        detail.value= row
        detailRef.value.open()
      }
    },
    // {
    //   label: "发送",
    //   callback: (row) => {
    //     sendMessageApi({
    //       fromUserId:'1',
    //       toUserId:'19',
    //       dateTime:'2025-08-18 15:00:21',
    //       ruleType:1,
    //       message:'警：电压异常'
    //     }).then(res => {

    //     })
    //   }
    // },
  ]
})
const queryParams = toRefs(options.value.tableRequest).params // 保持响应式的解构

/** 搜索按钮操作 */
const handleQuery = () => {
  richTableRef.value.initTable()
}
/** 重置按钮操作 */
const resetQuery = () => {
  proxy.resetForm("queryRef")
  richTableRef.value.initTable()
}
</script>

<style lang="scss" scoped>
.app-content {
  height: calc(100vh - 84px);
}
</style>
